<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getRoleTableList, roleSubmit, getMenuList } from '@/api'
import moment from 'moment'
import Form from './component/Form.vue'
import RoleDialog from './component/RoleDialog.vue'

const queryForm = ref()
const state = reactive({
  queryForm: {
    roleName: ''
  },
  roleList: [],
  page: {
    pageNum: 1,
    pageSize: 10,
    total: 0,
  },
  isShowForm: false,
  isShowRoleDialog: false,
  action: '',
  actionMap: {}, // 菜单名称映射
  menuItem: {}
})

const columns = [
  { prop: 'roleName', label: '角色名称' },
  { prop: 'remark', label: '备注' },
  {
    prop: 'permissionList', label: '权限列表', formatter(row, column, value) {
      let list = value.halfCheckedKeys || [];
      let menuNameList = []
      list.forEach(id => {
        if (state.actionMap[id]) {
          menuNameList.push(state.actionMap[id])
        }
      })
      return menuNameList.join(',')
    }
  },
  {
    prop: 'createTime', label: '创建时间', formatter: (row, column, value) => {
      return moment(value).format('YYYY-MM-DD H:mm')
    },
  },
]

onMounted(() => {
  query()
})

const query = async () => {
  try {
    let params = {
      roleName: state.queryForm.roleName,
      pageNum: state.page.pageNum,
      pageSize: state.page.pageSize,
    }
    let res = await getRoleTableList(params);
    state.roleList = res.list;
    state.page = res.page;

    let menuList = await getMenuList()

    let actionMap = getActionMap(menuList);
    state.actionMap = actionMap
    console.log('actionMap', actionMap);
  } catch (error) {
    console.error(error)
  }
}

const getActionMap = (list) => {
  let actionMap = {}
  let deep = (arr) => {
    while (arr.length) {
      let item = arr.pop()
      if (item.children && item.action) {
        actionMap[item._id] = item.menuName
      } else if (item.children && !item.action) {
        deep(item.children)
      }
    }
  }
  deep(list)
  return actionMap
}

const resetForm = () => {
  queryForm.value.resetFields()
}

const handelAdd = () => {
  state.action = 'add'
  state.isShowForm = true
}

const handelEdit = (roleItem) => {
  state.action = 'edit'
  state.isShowForm = true
  state.roleItem = roleItem
}

const handelCloseDialog = () => {
  state.isShowForm = false
  state.roleItem = {}
  state.action = ''
  query()
}

const handelDelete = async (roleItem) => {
  await roleSubmit({ _id: roleItem._id, action: 'delete' })
  query()
}

const dialogRoleClosed = () => {
  state.isShowRoleDialog = false
  handelCloseDialog()
}

const setRole = (roleItem) => {
  state.isShowRoleDialog = true
  state.roleItem = roleItem
}
// curRoleName

const handelCurrentChange = (currentPage) => {
  state.page.pageNum = currentPage
  query()
}

</script>
<template>
  <div class="role-manger">
    <div class="query-form">

      <el-form ref="queryForm" :inline="true" :model="state.queryForm">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="state.queryForm.roleName" placeholder="请输入菜单名称" />
        </el-form-item>
        <el-form-item>
          <el-button @click="query" type="primary">查询</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>

    </div>

    <div class="base-table">
      <div class="action">
        <el-button @click="handelAdd()" type="primary">新增</el-button>
      </div>
      <el-table :data="state.roleList">
        <el-table-column v-for="column of columns" :key="column.prop" :prop="column.prop" :label="column.label"
          :width="column.width" :formatter="column.formatter" />
        <el-table-column #default="scope" label="操作" width="250">
          <el-button @click="handelEdit(scope.row)">编辑</el-button>
          <el-button @click="setRole(scope.row)" type="primary">权限设置</el-button>
          <el-button @click="handelDelete(scope.row)" type="danger">删除</el-button>
        </el-table-column>
      </el-table>
      <el-pagination @current-change="handelCurrentChange" class="pagination" background layout="prev, pager, next"
        :page-size="state.page.pageSize" :total="state.page.total" />

    </div>

    <Form :isShowForm="state.isShowForm" :action="state.action" :roleItem="state.roleItem" @closed="handelCloseDialog" />
    <RoleDialog @closed="dialogRoleClosed" :roleItem="state.roleItem" :isShowRoleDialog="state.isShowRoleDialog" />
  </div>
</template>